<template>
  <div class="viewBox">
    <div class="header">
        <div class="left">星期三 15.30</div>
        <div class="center">变电站火灾监测</div>
        <div class="right">星期三 15.30</div>
    </div>
    <el-row>
      <el-col :span="8"><div class="charta" ref="charta"></div></el-col>
      <el-col :span="8"><div class="chartb" ref="chartb"></div></el-col>
      <el-col :span="8"><div class="chartc" ref="chartc"></div></el-col>
      <el-col :span="8"><div class="chartd" ref="chartd"></div></el-col>
      <el-col :span="8"><div class="charte" ref="charte"></div></el-col>
      <el-col :span="8"><div class="chartf" ref="chartf"></div></el-col>
      <el-col :span="16">
        <div class="tablea">
          <el-table
            class="custom-table"
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址"> </el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="tableb">
          <el-table
            class="custom-table"
            :data="tableData"
            style="width: 100%;"
          >
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
  import { ref, reactive, onMounted } from 'vue'
  import * as echarts from 'echarts'

  const initChart = (refName, option) => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(refName)
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  }
  // 图1
  const charta = ref()
  onMounted(() => {
    initChart(charta.value, optiona)
  })
  const optiona = {
    xAxis: {
      type: 'category',
      data: ['1', '2', '3', '4', '5'], // 组别名称
      // 轴线样式（横线）
      axisLine: {
        show: true, // 显示Y轴线
        lineStyle: {
          color: '#1D2D6A' // Y轴主轴线颜色
        }
      }
    },
    yAxis: {
      type: 'value',
      // 轴线样式（横线）
      axisLine: {
        show: true, // 显示Y轴线
        lineStyle: {
          color: '#1D2D6A' // Y轴主轴线颜色
        }
      },
      // X轴分割线（竖线）
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(200,200,200,0.3)', // 竖线颜色
          type: 'dashed' // 可选虚线
        }
      }
    },
    series: [
      // 第一个柱状图
      {
        type: 'bar',
        // name: 'Series A',
        data: [120, 200, 150, 80, 150, 200],
        itemStyle: {
          borderRadius: [10, 10, 0, 0], // 顶部圆角
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#0CB569' },
            { offset: 0.5, color: '#17C1A9' },
            { offset: 1, color: '#20CDDE' }
          ])
        },
        barWidth: '15%' // 控制柱子宽度
      },
      // 第二个柱状图
      {
        type: 'bar',
        // name: 'Series B',
        data: [80, 150, 200, 80, 150, 200],
        itemStyle: {
          borderRadius: [10, 10, 0, 0], // 顶部圆角
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#F8BD5B' },
            { offset: 0.5, color: '#FEA553' },
            { offset: 1, color: '#FC8C4D' }
          ]) // 颜色2
        },
        barWidth: '15%'
      }
    ],
    // 调整双柱间距
    grid: { right: '10%' },
    // 双柱并排显示配置
    legend: { show: true },
    tooltip: { trigger: 'axis' }
  }

  // 图2
  const chartb = ref()
  onMounted(() => {
    initChart(chartb.value, optionb)
  })
  const optionb = {
    // 标题样式
    title: {
      text: '技能评估雷达图',
      left: 'center'
    },

    // 圆形雷达坐标系配置
    radar: {
      // 关键配置：分割线样式
      splitLine: {
        lineStyle: {
          // 数组顺序：从内到外各圈样式
          type: ['dashed', 'dashed', 'dashed', 'dashed', 'dashed'], // 前三个内圈虚线，最外圈实线
          color: ['#eee', '#8088AB', '#8088AB', '#8088AB', '#8088AB'], // 颜色渐变
          width: 1
        }
      },
      // 控制同心圆数量（需与 lineStyle.type 数组长度匹配）
      splitNumber: 4, // 生成4个同心圆（含最外圈）

      shape: 'circle', // 核心配置：设为圆形
      center: ['50%', '52%'], // 圆心位置
      radius: '65%', // 半径大小

      // 坐标轴样式
      axisLine: {
        lineStyle: {
          color: 'rgba(100, 100, 100, 0.1)', // 网格线颜色
          type: 'dashed'
        }
      },

      // 刻度标签
      axisLabel: {
        color: '#666'
      },

      // 分割区域样式
      splitArea: {
        areaStyle: {
          color: ['rgba(200,200,200,0)', 'rgba(200,200,200,0)'] // 交替颜色
        }
      },

      // 指示器配置（维度标签）
      indicator: [
        { name: '技术能力', max: 100 },
        { name: '沟通能力', max: 100 },
        { name: '项目管理', max: 100 },
        { name: '学习能力', max: 100 },
        { name: '创新能力', max: 100 }
      ]
    },

    // 数据系列
    series: [
      {
        type: 'radar',
        // 关键配置：隐藏数据点和连接线
        symbol: 'none', // 隐藏数据点
        lineStyle: {
          width: 0 // 隐藏连接线
        },
        // 保留区域填充色（可选）
        areaStyle: {
          color: '#00FF4C' // 带透明度的颜色
        },
        data: [
          {
            value: [85, 70, 90, 95, 80],
            name: '个人能力',

            // 线条样式
            lineStyle: {
              color: '#409EFF',
              width: 1,
              type: 'dashed'
            }
          }
        ]
      }
    ]
  }

  // 图3
  const chartc = ref()
  onMounted(() => {
    initChart(chartc.value, optionc)
  })
  // 生成模拟数据 [x轴值, y轴值, 点大小值]
  const datac = Array.from({ length: 100 }, () => [
    Math.random() * 10,
    Math.random() * 10,
    Math.random() * 4 + 10 // 大小范围10~50
  ])
  const optionc = {
    xAxis: {
      type: 'value',
      // 修改横线颜色（轴线）
      axisLine: {
        lineStyle: {
          color: '#465286', // 红色轴线
          type: 'dashed'
        }
      },
      // 修改网格线颜色（横线）
      splitLine: {
        lineStyle: {
          color: '#465286'
        }
      }
    },
    yAxis: {
      type: 'value',
      // 修改横线颜色（轴线）
      axisLine: {
        lineStyle: {
          color: '#465286', // 红色轴线
          type: 'dashed'
        }
      },
      // 修改网格线颜色（横线）
      splitLine: {
        lineStyle: {
          color: '#465286'
        }
      }
    },
    series: [
      {
        type: 'scatter',
        data: datac,
        symbolSize: (val) => val[2], // 第三位控制大小
        itemStyle: {
          // 颜色映射到大小值
          color: (params) => {
            const size = params.data[2]
            // 颜色从浅蓝渐变到深蓝
            return echarts.color.lift(
              new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#8EC5FC' }, // 浅色
                { offset: 1, color: '#3B5BDB' } // 深色
              ]),
              size / 50 // 根据大小值调整亮度
            )
          }
        }
      }
    ],
    // 可视化映射组件（显示颜色条）
    visualMap: {
      type: 'continuous',
      dimension: 2, // 映射第三维数据（大小值）
      min: 10, // 最小值
      max: 50, // 最大值
      calculable: true,
      inRange: {
        color: ['#8EC5FC', '#3B5BDB'] // 与渐变色对应
      },
      right: '3%' // 位置调整
    }
  }
  // 图4
  const chartd = ref()
  onMounted(() => {
    initChart(chartd.value, optiond)
  })

  const optiond = {
    // title: {
    //   text: '湿度',
    //   left: 'center'
    // },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    // legend: {
    //   data: ['湿度值', '趋势线']
    // },
    xAxis: {
      type: 'category',
      data: ['1', '2', '3', '4', '5'],
      // 修改横线颜色（轴线）
      axisLine: {
        lineStyle: {
          color: '#465286', // 红色轴线
          type: 'dashed'
        }
      },
      // 修改网格线颜色（横线）
      splitLine: {
        lineStyle: {
          color: '#465286'
        }
      }
    },
    yAxis: {
      type: 'value',
      // 修改横线颜色（轴线）
      axisLine: {
        lineStyle: {
          color: '#465286', // 红色轴线
          type: 'dashed'
        }
      },
      // 修改网格线颜色（横线）
      splitLine: {
        lineStyle: {
          color: '#465286'
        }
      }
    },
    series: [
      {
        name: '湿度值',
        type: 'bar',
        data: [25, 55, 35, 30, 15],
        itemStyle: {
          color: function (params) {
            // 根据索引设置颜色
            var colorList = [
              '#00199E',
              '#5ECBFF',
              '#00199E',
              '#5ECBFF',
              '#00199E'
            ]
            return colorList[params.dataIndex]
          }
        }
      },
      {
        name: '趋势线',
        type: 'line',
        data: [25, 55, 35, 30, 15],
        itemStyle: {
          color: '#ffc107'
        }
      }
    ]
  }
  //   图5

  const charte = ref()
  onMounted(() => {
    initChart(charte.value, optione)
  })
  const optione = {
    title: {
      text: '红外测温数据',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: Array.from({ length: 31 }, (_, i) => i + 1),
      // 修改横线颜色（轴线）
      axisLine: {
        lineStyle: {
          color: '#465286', // 红色轴线
          type: 'dashed'
        }
      },
      // 修改网格线颜色（横线）
      splitLine: {
        lineStyle: {
          color: '#465286'
        }
      }
    },
    yAxis: {
      type: 'value',
      // 修改横线颜色（轴线）
      axisLine: {
        lineStyle: {
          color: '#465286', // 红色轴线
          type: 'dashed'
        }
      },
      // 修改网格线颜色（横线）
      splitLine: {
        lineStyle: {
          color: '#465286'
        }
      }
    },
    series: [
      {
        name: '温度',
        type: 'line',
        smooth: true,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(255, 158, 68, 0.5)' },
            { offset: 1, color: 'rgba(255, 70, 131, 0.5)' }
          ])
        },
        data: Array.from({ length: 31 }, () => Math.floor(Math.random() * 70))
      }
    ]
  }

  // 图6
  const chartf = ref()
  onMounted(() => {
    initChart(chartf.value, optionf)
  })
  const optionf = {
    xAxis: {
      type: 'category',
      data: ['1', '2', '3', '4', '5'], // 组别名称
      // 轴线样式（横线）
      axisLine: {
        show: true, // 显示Y轴线
        lineStyle: {
          color: '#1D2D6A' // Y轴主轴线颜色
        }
      }
    },
    yAxis: {
      type: 'value',
      // 轴线样式（横线）
      axisLine: {
        show: true, // 显示Y轴线
        lineStyle: {
          color: '#1D2D6A' // Y轴主轴线颜色
        }
      },
      // X轴分割线（竖线）
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(200,200,200,0.3)', // 竖线颜色
          type: 'dashed' // 可选虚线
        }
      }
    },
    series: [
      // 第一个柱状图
      {
        type: 'bar',
        // name: 'Series A',
        data: [120, 200, 150, 80, 150, 200],
        itemStyle: {
          borderRadius: [10, 10, 0, 0], // 顶部圆角
          color: '#09B66D'
        },
        barWidth: '15%' // 控制柱子宽度
      },
      // 第二个柱状图
      {
        type: 'bar',
        // name: 'Series B',
        data: [80, 150, 200, 80, 150, 200],
        itemStyle: {
          borderRadius: [10, 10, 0, 0], // 顶部圆角
          color: '#246CFC'
        },
        barWidth: '15%'
      },
      // 第三个柱状图
      {
        type: 'bar',
        // name: 'Series B',
        data: [80, 150, 200, 80, 150, 200],
        itemStyle: {
          borderRadius: [10, 10, 0, 0], // 顶部圆角
          color: '#FF8A48' // 颜色2
        },
        barWidth: '15%'
      }
    ],
    // 调整双柱间距
    grid: { right: '10%' },
    // 双柱并排显示配置
    legend: { show: true },
    tooltip: { trigger: 'axis' }
  }

  // 表格7
  const tableData = reactive([
    {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    },
    {
      date: '2016-05-04',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1517 弄'
    },
    {
      date: '2016-05-01',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1519 弄'
    },
    {
      date: '2016-05-03',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1516 弄'
    }
  ])
</script>
<style lang="scss" scoped>
    .header{
        width:100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        color:#FFF;
        padding-top:20px;
        margin-bottom: 20px;
        .left{
            flex:1;
            text-align: center;
        }
        .center{
            font-size:32px;
            font-weight: blod;
        }
         .right{
            flex:1;
            text-align: center;
        }
    }
  .viewBox {
    width: 100%;
    height: 100%;
    background: url('@/assets/bg-tongyi.png') center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 1px 30px 30px 30px;
  }
  .viewBox .el-col {
    margin-bottom: 20px;
  }
  .charta {
    width: 95%;
    height: 220px;
    background: url('@/assets/bgLeft.png') center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 0 3%;
  }
  .chartb {
    width: 95%;
    height: 220px;
    background: url('@/assets/bgCenter.png') center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .chartc {
    width: 95%;
    height: 220px;
    background: url('@/assets/bgRight.png') center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .chartd {
    width: 95%;
    height: 220px;
    background: url('@/assets/bgCenter.png') center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .charte {
    width: 95%;
    height: 220px;
    background: url('@/assets/bgCenter.png') center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .chartf {
    width: 95%;
    height: 220px;
    background: url('@/assets/bgCenter.png') center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .tablea {
    width: 95%;
    height: 220px;
    background: url('@/assets/bgCenter.png') center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .tableb {
    width: 95%;
    height: 220px;
    background: url('@/assets/bgCenter.png') center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
</style>
<style>
  .custom-table,
  .custom-table tr,
  .custom-table th.el-table__cell {
    background-color: transparent !important;
    border: 1px solid #0e9cff !important;
    color: #fff !important;
  }
  .custom-table tr:hover {
    background-color: transparent !important;
    border: 1px solid #0e9cff !important;
    color: #fff !important;
  }
  .custom-table .el-table__row td:hover {
    background-color: transparent !important;
    color: #fff !important;
  }
  .custom-table .el-table__row tr:hover {
    background-color: transparent !important;
    color: #fff !important;
  }
  .custom-table .el-table__row td:hover div {
    background-color: transparent !important;
    color: #fff !important;
  }
  .custom-table .el-table__row:hover td {
    background-color: transparent !important;
    color: #fff !important;
  }
  .custom-table,
  .el-table td.el-table__cell,
  .el-table th.el-table__cell.is-leaf {
    border: 1px solid #0e9cff;
  }
  .custom-table div {
    color: #fff !important;
  }
  .el-table__inner-wrapper {
    border: 1px solid #0e9cff !important;
  }
</style>
